import type { LineLayerProps } from '@antv/larkmap';
import { LarkMap, LineLayer } from '@antv/larkmap';
import { useEffect, useState } from 'react';

const layerOptions: Omit<LineLayerProps, 'source'> = {
  autoFit: true,
  shape: 'line' as const,
  size: 1.5,
  color: {
    field: 'line_name',
    value: ['#5B8FF9', '#5CCEA1', '#5D7092'],
  },
  state: { active: { color: '#FFF684' } },
  style: {
    opacity: 0.8,
    lineType: 'solid' as const,
  },
};

export default () => {
  const [options] = useState(layerOptions);
  const [source] = useState({
    data: [
      {
        line_id: '110100010117',
        line_name: '21路(北京西站--安华桥北)',
        lnglat: [
          [116.32402, 39.896538],
          [116.323349, 39.896526],
          [116.323349, 39.89687],
          [116.328559, 39.896845],
          [116.328549, 39.89731],
          [116.321907, 39.89724],
          [116.321281, 39.898571],
          [116.321258, 39.907426],
          [116.335434, 39.907227],
          [116.335533, 39.909328],
          [116.33476, 39.911563],
          [116.334545, 39.91279],
          [116.334561, 39.91404],
          [116.355064, 39.913834],
          [116.356895, 39.91396],
          [116.356583, 39.920521],
          [116.356377, 39.921619],
          [116.355537, 39.941948],
          [116.355621, 39.942657],
          [116.35614, 39.943516],
          [116.356285, 39.944717],
          [116.356461, 39.945057],
          [116.356461, 39.948833],
          [116.356354, 39.949722],
          [116.355423, 39.953217],
          [116.354286, 39.976486],
          [116.393028, 39.976826],
          [116.394157, 39.976372],
          [116.394279, 39.97177],
        ],
      },
    ],
    parser: { type: 'json', coordinates: 'lnglat' },
  });

  useEffect(() => {
    fetch('https://gw.alipayobjects.com/os/antfincdn/1atwIMvcMo/beijinggongjiaoluxian.json')
      .then((response) => response.json())
      .then((data: any) => {
        console.log(data);

        // setSource((prevState) => ({ ...prevState, data }));
      });
  }, []);

  return (
    <LarkMap mapType="Gaode" style={{ height: '100%' }}>
      <LineLayer {...options} source={source} minZoom={10} maxZoom={25} />
    </LarkMap>
  );
};
